<template>
  <view>
    <view v-if="userInfo.length===0" class="login">
      <button  open-type="getUserInfo" @getuserinfo="getUserInfo">自动登录</button>
    </view>
    <view v-else>
        <view class="userInfo">
            <image class="user_bg" :src="userInfo.avatarUrl"  mode="aspectFill" />
            <image class="avatar" :src="userInfo.avatarUrl"  mode="aspectFit"  />
            <text class="name"> {{userInfo.nickName}}</text>
        </view>
    </view>
  </view>
</template>

<script>
import { userLogin } from '@/api/user'
export default {
    onLoad(){
      this.userInfo = uni.getStorageSync('userInfo') || []
      console.log(this.userInfo);
    },
    data() {
      return {
        userInfo:[]
      }
    },
    methods: {
     async  getUserInfo(e){
       const {rawData,encryptedData,iv,signature,userInfo } = e.detail
       const [,{code}]= await uni.login()

      const res=await userLogin({
         rawData,encryptedData,iv,signature,code
       })
       console.log(res);
       if(res.data.message){
         uni.setStorageSync('token', res.data.message.token)
        uni.setStorageSync('userInfo', userInfo)
        this.userInfo = userInfo
        uni.showToast({
          title: '登陆成功',
          duration: 1000
        });
       }else{
          uni.showToast({
            title: '登陆失败',
            icon:'fail',
            duration: 2000
          });
       }
      }
    },
}
</script>

<style lang="less" scoped>
  .userInfo{
    position: relative;
    width: 750rpx;
    height: 330rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
      overflow: hidden;
    .user_bg{
      position: absolute;
      width: 120%;
      height: 120%;
      left: -10%;
      right: -10%;
      z-index: -1;
      filter: blur(15px);
    }
    .avatar{

      height: 172rpx;
      width: 172rpx;
      border-radius: 50%;
    }
    .name{
      color: #fff;
    }
  }
</style>